<template>
    <div class="orderdetail">
        <Header></Header>
        <div style="height: 48px;"></div>
        <div class="detailbox">
            <div class="contenttop">
                <p class="title">{{ $t('assemble.首页') }}/{{ $t('assemble.我的账户') }}/{{ $t('assemble.订单详情') }}</p>
                <div class="detailjindu">
                    <el-steps :active="dataAll.state" align-center>
                        <el-step :title="$t('assemble.提交成功')" icon="el-icon-success"></el-step>
                        <el-step :title="$t('assemble.审核通过')" icon="el-icon-success"></el-step>
                        <el-step :title="$t('assemble.生产中')" icon="el-icon-success"></el-step>
                        <el-step :title="$t('assemble.发货')" icon="el-icon-success"></el-step>
                        <el-step :title="$t('assemble.订单完成')" icon="el-icon-success"></el-step>
                    </el-steps>
                    <div v-if="dataAll.state > 0" class="down" style="cursor: pointer;" @click="gotopaybook">
                        {{ $t('assemble.查看付款通知') }}
                    </div>
                </div>
                <P class="heng"></P>

                <!-- 订单信息 -->
                <div class="ordermessage">
                    <p class="title">{{ $t('assemble.订单信息') }}</p>
                    <div class="orderlist">
                        <!-- <p v-if="dataAll.product">产品描述：{{ dataAll.product[1] }}</p> -->
                        <!-- <p>产品类别：{{ dataAll.category }}</p> -->

                        <div class="orderbox">
                            <p>{{ $t('assemble.订单编号') }}：{{ dataAll.number }}</p>
                            <p>{{ $t('assemble.授权渠道') }}：{{ dataAll.bazaar }}</p>
                            <p v-if="dataAll.brand">{{ $t('assemble.授权产品子类别') }}：{{ dataAll.brand[1] }}</p>
                        </div>

                        <div class="orderbox">
                            <p>{{ $t('assemble.被授权商名称') }}：{{ dataAll.chinesename }}</p>
                            <p v-if="dataAll.brand">{{ $t('assemble.授权品牌') }}：{{ dataAll.brand[0] }}</p>
                        </div>

                        <div class="orderbox">
                            <p>{{ $t('assemble.授权区域') }}：{{ dataAll.user_area_id }}</p>
                            <p>{{ $t('assemble.授权产品类别') }}：{{ dataAll.category }}</p>
                        </div>
                    </div>
                    <div class="orderlist">
                        <div class="orderbox">
                            <p>{{ $t('assemble.制造商名称') }}：{{ manufacturer.manufacturer_name }}</p>
                            <p>{{ $t('assemble.联系电话') }}：{{ manufacturer.manufacturer_mobile }}</p>
                            <p>{{ $t('assemble.备注') }}：{{ dataAll.remark }}</p>

                        </div>
                        <div class="orderbox">
                            <p>{{ $t('assemble.制造商地址') }}：{{ manufacturer.manufacturer_site }}</p>
                            <p>{{ $t('assemble.邮编') }}：{{ manufacturer.manufacturer_postcode }}</p>
                        </div>
                        <div class="orderbox">
                            <p>{{ $t('assemble.联络人') }}:{{ manufacturer.liaisons }}</p>
                            <p v-if="dataAll.state == -1">{{ $t('assemble.未通过原因') }}：{{ refusal }}</p>

                        </div>
                    </div>

                </div>
            </div>

            <!-- 商品信息 -->
            <div class="productmessage">
                <div class="productmessagetop">
                    <p>{{ $t('assemble.商品图片') }}</p>
                    <p>{{ $t('assemble.商品名称') }}</p>
                    <p>{{ $t('assemble.单位') }}</p>
                    <p>{{ $t('assemble.数量') }}</p>
                    <p>{{ $t('assemble.单价') }}</p>
                    <p>{{ $t('assemble.总价') }}</p>
                    <!-- <p>状态</p> -->
                </div>
                <div class="productmessagecontent">
                    <div style="width:360px; text-align: center">
                        <img :src="productimg" alt="">

                    </div>
                    <p style="width: 150px; text-align: center">{{ dataAll.name }}</p>
                    <p style="width: 100px; text-align: center">{{ dataAll.unit }}</p>
                    <p style="width: 150px; text-align: center">{{ dataAll.num }}</p>
                    <p style="width: 100px; text-align: center">￥{{ dataAll.price }}</p>
                    <p style="width: 200px; text-align: center">￥{{ dataAll.total }}</p>
                    <!-- <p style="width: 100px; text-align: center" v-show="dataAll.state == 0">未通过审批</p>
                    <p style="width: 100px; text-align: center" v-show="dataAll.state == 1">待审批</p>
                    <p style="width: 100px; text-align: center" v-show="dataAll.state == 2">生产中</p>
                    <p style="width: 100px; text-align: center" v-show="dataAll.state == 3">发货</p>
                    <p style="width: 100px; text-align: center" v-show="dataAll.state == 4">完成</p> -->
                </div>

            </div>

            <!-- 代码范围 -->
            <div class="codesize">
                <p class="title">{{ $t('assemble.代码范围') }}</p>
                <div class="sizebox">
                    <!-- {{ dataAll.range }} -->
                    <div v-for="(item, index) in ranges" :key="index">
                        <p>{{ item.key }}-{{ item.value }}</p>
                    </div>
                </div>

            </div>
            <!-- 失效代码 -->
            <div class="codesize">
                <p class="title">{{ $t('assemble.失效代码') }}</p>
                <div class="sizebox">
                    <div v-for="(item, index) in loseefficacys" :key="index">
                        <p>{{ item.key }}-{{ item.value }}</p>
                    </div>
                </div>

            </div>

            <!-- 代码文件 -->
            <div class="codefile">
                <p class="title">{{ $t('assemble.代码文件') }}</p>
                <div class="filebox">
                    <div v-show="dataAll.txt_files" class="fileitem">
                        <div class="fileimgandname">
                            <img src="../../../static/imgs/texting.png" alt="">
                            <span>
                                {{ dataAll.txt_files }}
                            </span>
                        </div>
                        <div class="uploadimg" @click="upload(dataAll.txt_files)">
                            <img src="../../../static/imgs/fileupload.png" alt="">
                        </div>
                    </div>
                </div>

            </div>

            <!-- 标签物流资料 -->
            <div class="lablemessage">
                <p class="title">{{ $t('assemble.标签物流资料') }}</p>
                <div class="lablebox">
                    <div class="lableitem">
                        <p>{{ $t('assemble.商品收货人公司名称') }}：{{ dataAll.delivery.company }}</p>
                        <p>{{ $t('assemble.商品收件人地址') }}：{{ dataAll.delivery.site }}</p>
                    </div>
                    <div class="lableitem">
                        <p>{{ $t('assemble.商品收货人姓名') }}：{{ dataAll.delivery.name }}</p>
                        <p>{{ $t('assemble.邮政编号') }}：{{ dataAll.delivery.postcode }}</p>
                    </div>

                    <div class="lableitem">
                        <p>{{ $t('assemble.商品收货人联系电话') }}：{{ dataAll.delivery.mobile }}</p>
                        <p>{{ $t('assemble.商品物流单号') }}：{{ dataAll.trackingnumber }}</p>

                    </div>

                </div>

            </div>

            <!-- 开票资料 -->
            <div class="lablemessage">
                <p class="title">{{ $t('assemble.开票资料') }}</p>
                <div class="lablebox">
                    <div class="lableitem">
                        <p>{{ $t('assemble.发票类型') }}：{{ dataAll.invoice_type }}</p>
                        <!-- <p>购方地址电话：{{ dataAll.invoice_mobile }}</p> -->
                    </div>
                    <div class="lableitem">
                        <p>{{ $t('assemble.购方名称') }}：{{ dataAll.invoice_name }}</p>
                        <!-- <p>购方开户行：{{ dataAll.invoice_opening }}</p> -->
                    </div>

                    <div class="lableitem">
                        <p>{{ $t('assemble.购方税号') }}：{{ dataAll.invoice_number }}</p>
                        <!-- <p>购方银行账户：{{ dataAll.invoice_bank }}</p> -->
                    </div>

                </div>
            </div>

            <!-- 发票物流资料 -->
            <div class="lablemessage">
                <p class="title">{{ $t('assemble.电子发票接收人资料') }}</p>
                <div class="lablebox">
                    <div class="lableitem">
                        <p>{{ $t('assemble.电子发票收件人邮箱') }}：{{ dataAll.electronic_email }}</p>
                        <p>{{ $t('assemble.电子发票收件人手机号') }}：{{ dataAll.electronic_mobile == null ? "" : dataAll.electronic_mobile }}</p>
                    </div>
                    <!-- <div class="lableitem">
                        <p>发票收件人姓名：{{ dataAll.invoicesite.name }}</p>
                        <p>邮政编号：{{ dataAll.invoicesite.postcode }}</p>
                    </div>

                    <div class="lableitem">
                        <p>发票收件人联系电话：{{ dataAll.invoicesite.mobile }}</p>
                        <p>发票物流单号：{{ dataAll.invoicenumber }}</p>
                    </div> -->

                </div>
            </div>

        </div>
        <div style="height: 184px;"></div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
import { getinfodata } from '../../../utils/api'

export default {
    components: {
        Header,
        Footer
    },
    data() {
        return {
            dataAll: {},
            productimg: "",
            manufacturer: {},//制造商数据
            ranges: [],
            loseefficacys: [],
            refusal: "",

        }
    },
    mounted() {
        // console.log('订单详情', this.$route.query.id)
        this.getinfodataList(this.$route.query.id)
        if (localStorage.getItem("refusal") != "null") {
            this.refusal = localStorage.getItem("refusal")
        }
        console.log("3333", typeof (localStorage.getItem("refusal")))
    },
    methods: {
        async getinfodataList(id) {

            let data = {
                id: id
            }
            let res = await getinfodata(data)
            if (res.code == 1) {
                console.log("订单详情", res)
                this.dataAll = res.data
                this.productimg = this.dataAll.images.split(",")[0]
                this.dataAll.brand = this.dataAll.brand.split(",")
                this.dataAll.product = this.dataAll.product.split(",")
                this.manufacturer = this.dataAll.manufacturer ? JSON.parse(this.dataAll.manufacturer) : this.manufacturer
                for (var item in this.dataAll.range) {
                    this.ranges.push({ "key": item, "value": this.dataAll.range[item] })
                }
                for (var item in this.dataAll.loseefficacy) {
                    this.loseefficacys.push({ "key": item, "value": this.dataAll.loseefficacy[item] })
                }
                this.dataAll.txt_files.split(",")
                // this.dataAll.txt_files.forEach((item,index) => {
                this.dataAll.txt_files = this.dataAll.txt_files.split("/")
                this.dataAll.txt_files = this.dataAll.txt_files[this.dataAll.txt_files.length - 1]
                this.dataAll.txt_files = this.dataAll.txt_files.slice(0, this.dataAll.txt_files.length - 4)

                // });
                console.log("this.dataAll", this.dataAll.txt_files)
            } else {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.$router.go(-1)
            }
            if (res.code == 401) {
                this.$router.push({ path: '/login' })
            }

        },
        gotopaybook() {
            localStorage.setItem("dataAll", JSON.stringify(this.dataAll))
            this.$router.push({ path: '/home/payBook' })


        },
        upload(fils) {
            window.open(upload)
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-step__title {
    font-size: 14px;
}

.orderdetail {
    width: 100%;
    background: #F8F8F8;


    .detailbox {
        padding: 0 20px;
        box-sizing: border-box;

        .contenttop {
            width: 1200px;
            height: 655px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin: 20px auto;
            // 带修改
            padding: 20px 0px;
            box-sizing: border-box;


            .title {
                font-size: 15px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 19px;
                margin-left: 150px;
            }

            .detailjindu {
                width: 1100px;
                margin: 0 auto;
                margin-top: 50px;
                position: relative;

                .down {
                    font-size: 10px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #0061D2;
                    line-height: 15px;
                    position: absolute;
                    left: 295px;
                }

            }

            .heng {
                width: 1200px;
                height: 1px;
                opacity: 1;
                background-color: #EDEDED;
                margin-top: 50px;
                margin-bottom: 50px;

            }

            .ordermessage {
                width: 1200px;
                height: 358px;
                margin: 0 auto;

                .orderlist {

                    width: 100%;
                    padding: 0 150px;
                    display: flex;
                    justify-content: space-between;
                    box-sizing: border-box;

                    .orderbox {
                        width: 33.33%;
                        font-size: 13px;
                    }
                }

            }


        }

        .productmessage {
            width: 1200px;
            height: 217px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin: 0 auto;
            margin-top: 20px;
            // padding: 0 20px;
            box-sizing: border-box;

            .productmessagetop {
                width: 1200px;
                height: 57px;
                background: #EDEDED;
                border-radius: 10px 10px 0px 0px;
                opacity: 1;
                display: flex;
                justify-content: space-between;

                p {
                    font-size: 15px;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 30px;

                    &:nth-of-type(1) {
                        width: 360px;
                        text-align: center;
                    }

                    &:nth-of-type(2) {
                        width: 150px;
                        text-align: center;
                    }

                    &:nth-of-type(3) {
                        width: 100px;
                        text-align: center;
                    }

                    &:nth-of-type(4) {
                        width: 150px;
                        text-align: center;
                    }

                    &:nth-of-type(5) {
                        width: 100px;
                        text-align: center;
                    }

                    &:nth-of-type(6) {
                        width: 200px;
                        text-align: center;
                    }

                    &:nth-of-type(7) {
                        width: 100px;
                        text-align: center;
                    }

                }
            }

            .productmessagecontent {
                width: 1200px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;

                img {
                    width: 240px;
                    height: 120px;
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                }

                p {
                    font-size: 14px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 21px;
                }
            }
        }

        .codesize {
            width: 1200px;
            // height: 183px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            padding: 40px 150px;
            box-sizing: border-box;
            margin: 0 auto;
            margin-top: 20px;

            .title {
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 19px;
            }

            .sizebox {
                font-size: 14px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 21px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }

        .codefile {
            width: 1200px;
            // height: 258px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin: 0 auto;
            margin-top: 20px;
            padding: 40px 150px;
            box-sizing: border-box;

            .filebox {
                margin-top: 20px;

                .fileitem {
                    width: 500px;
                    height: 100px;
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                    border: 1px solid #B1B1B1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 25px 20px;
                    box-sizing: border-box;

                    .fileimgandname {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;

                        img {
                            width: 50px;
                            height: 50px;
                            margin-right: 10px;
                        }
                    }

                    .uploadimg {
                        img {
                            width: 40px;
                            height: 40px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }

        .lablemessage {
            width: 1200px;
            height: 228px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin: 0 auto;
            margin-top: 20px;
            padding: 40px 150px;
            box-sizing: border-box;

            .title {
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 19px;
            }

            .lablebox {
                margin-top: 20px;
                display: flex;
                justify-content: space-between;

                .lableitem {
                    width: 33.33%;
                    font-size: 14px;

                }

            }
        }
    }
}
</style>